<template>
  <CommonPage title="订单管理">
    <template #mid>
      <SearchForm :keyword-search-data="[{ key: 'keywords', label: '商品名称' }]" @search="handleSearch"> </SearchForm>
    </template>
    <SlTable
      :columns="columns"
      row-key="levels"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }: BodyCellOptions<Partial<OrderItem>>">
        <div v-if="column.key === 'oper'">
          <a @click="showDetail(record)"> 详情 </a>
        </div>
        <div v-else-if="column.dataIndex === 'address'" class="whitespace-normal min-w-36 break-all">
          {{ record.address }}
        </div>
        <FitTitleCell v-else :record="record" :column="column" />
      </template>
    </SlTable>
    <FullPageModal
      v-if="detailData"
      v-model:visible="detailVisible"
      title="订单详情"
      :get-container="getContainer"
      mask
      inset-cls="!inset-x-4 !inset-y-4"
      hide-footer
    >
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="订单号"> {{ handleValue(detailData.orderNo) }} </a-descriptions-item>
        <a-descriptions-item label="支付凭据"> {{ handleValue(detailData.payVoucher) }} </a-descriptions-item>
        <a-descriptions-item label="OpenID"> {{ handleValue(detailData.openid) }} </a-descriptions-item>
        <a-descriptions-item label="支付方式"> 微信支付 </a-descriptions-item>
        <a-descriptions-item label="UnionID"> {{ handleValue(detailData.unionId) }} </a-descriptions-item>
        <a-descriptions-item label="支付金额"> ¥{{ getFloatInteger(detailData.payAmount) }} </a-descriptions-item>
        <a-descriptions-item label="会员姓名"> {{ handleValue(detailData.name) }} </a-descriptions-item>
        <a-descriptions-item label="支付时间">
          {{ handleDateRowRender({ text: detailData.payTime }) }}
        </a-descriptions-item>
        <a-descriptions-item label="下单时间">
          {{ handleDateRowRender({ text: detailData.orderTime }) }}
        </a-descriptions-item>
        <a-descriptions-item label="提货方式"> 配送 </a-descriptions-item>
        <a-descriptions-item label="订单金额"> ¥{{ getFloatInteger(detailData.orderAmount) }} </a-descriptions-item>
        <a-descriptions-item label="配送时间">
          {{ handleDateRowRender({ text: detailData.deliveryTime }) }}
        </a-descriptions-item>
        <a-descriptions-item label="订单状态">
          {{ getLabelByValueFromEnum(detailData.status, OrderStatus, "orderStatus") }}
        </a-descriptions-item>
        <a-descriptions-item label="配送人员"> {{ handleValue("--") }} </a-descriptions-item>
        <a-descriptions-item label="收货信息"> {{ handleValue(detailData.address) }} </a-descriptions-item>
        <a-descriptions-item label="本单积分"> {{ handleValue(detailData.point) }} </a-descriptions-item>
      </a-descriptions>
      <div class="py-4 tex-lg font-semibold"> 商品清单: </div>
      <div class="h-120">
        <SlTable
          :columns="productColumns"
          :data-source="detailData.detail"
          :pagination="undefined"
          class="border border-solid border-color-split"
        >
          <template #bodyCell="{ column, record }: BodyCellOptions<Partial<ProductFileItem>>">
            <FitTitleCell :record="record" :column="column" />
          </template>
        </SlTable>
      </div>
    </FullPageModal>
  </CommonPage>
</template>
<script lang="ts" setup>
import { nextTick, ref, shallowRef } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { message, UploadProps, type TableProps, type UploadChangeParam, UploadFile } from "ant-design-vue";
import { OrderItem, OrderStatus } from "/@/api/main/member/models";
import { Api, getOrderDetail } from "/@/api/main/member";
import type { BodyCellOptions } from "/@/types/antd";
import {
  downloadFile,
  getLabelByValueFromEnum,
  handleDateRowRender,
  handleValue,
  getFloatInteger,
} from "/@/utils/common";
import { ProductFileItem } from "/@/api/main/pis/models";

const { t } = useI18n();
const columns = ref<TableProps<Partial<OrderItem>>["columns"]>([
  {
    title: "订单号",
    dataIndex: "orderNo",
  },
  {
    title: "OpenID",
    dataIndex: "openid",
  },
  {
    title: "UnionID",
    dataIndex: "unionId",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "下单时间",
    dataIndex: "orderTime",
    customRender: handleDateRowRender,
  },
  {
    title: "收货地址",
    dataIndex: "address",
  },
  {
    title: "订单金额",
    dataIndex: "orderAmount",
  },
  {
    title: "支付凭据",
    dataIndex: "payVoucher",
  },
  {
    title: "支付方式",
    dataIndex: "payMethod",
    customRender() {
      return "微信支付";
    },
  },
  {
    title: "支付时间",
    dataIndex: "payTime",
    customRender: handleDateRowRender,
  },
  {
    title: "支付金额",
    dataIndex: "payAmount",
  },
  {
    title: "完结时间",
    dataIndex: "endTime",
  },
  {
    title: "积分",
    dataIndex: "point",
  },
  {
    title: "状态",
    dataIndex: "status",
    fixed: "right",
    customRender({ text }) {
      return getLabelByValueFromEnum(text, OrderStatus, "orderStatus");
    },
  },
  {
    title: t("common.oper"),
    key: "oper",
    fixed: "right",
  },
]);

const { pagination, tableData, tableLoading, reloadTable } = useCURD<Partial<OrderItem>>({
  getPageUrl: Api.orderPage,
});

function handleSearch(model) {
  reloadTable(model);
}
/**
 * detail
 */
const detailVisible = ref(false);
const detailData = ref<Partial<OrderItem>>();
function getContainer() {
  return document.body;
}
async function showDetail(record: Partial<OrderItem>) {
  record = { ...record };
  const data = await getOrderDetail(record.orderNo);
  if (data) {
    record.detail = data;
    detailData.value = record;
    nextTick(() => {
      detailVisible.value = true;
    });
  }
}

const productColumns = ref([
  {
    title: "商品条码",
    dataIndex: "barCode",
  },
  {
    title: "商品名称",
    dataIndex: "name",
  },
  {
    title: "计量单位",
    dataIndex: "measurementUnit",
  },
  {
    title: "规格",
    dataIndex: "specifications",
  },
  {
    title: "销售数量",
    dataIndex: "quantity",
  },
  {
    title: "销售单价",
    dataIndex: "price",
  },
  {
    title: "销售金额",
    dataIndex: "amount",
  },
  {
    title: "积分",
    dataIndex: "point",
  },
]);
</script>
